<template>
  <div class="grid-demo">
    <h2>Element Plus 栅格布局</h2>

    <!-- 基础栅格 -->
    <el-row class="row">
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>

    <!-- 等分栅格 -->
    <el-row :gutter="10" class="row">
      <el-col :span="8" :offset="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="1" :pull="2"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="3" :push="1"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="10"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

    <!-- 带间隔的栅格 -->
    <el-row :gutter="20" class="row">
      <el-col :span="8"><div class="grid-content bg-blue"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-blue-light"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-blue"></div></el-col>
    </el-row>

    <!-- 响应式布局 -->
    <el-row :gutter="20" class="row">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <div class="grid-content bg-green"></div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <div class="grid-content bg-green-light"></div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <div class="grid-content bg-green"></div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <div class="grid-content bg-green-light"></div>
      </el-col>
    </el-row>

    <!-- 对齐方式 -->
    <el-row justify="space-between" align="middle" class="row tall-row">
      <el-col :span="4"><div class="grid-content bg-gold"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-gold"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-gold"></div></el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 按需导入组件（如果使用自动导入可忽略）
import { ElRow, ElCol } from 'element-plus'
</script>

<style scoped>
.grid-demo {
  padding: 20px;
}

.row {
  margin-bottom: 20px;
}

.tall-row {
  height: 100px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

/* 背景色样式 */
.bg-purple-dark { background: #99a9bf; }
.bg-purple { background: #d3dce6; }
.bg-purple-light { background: #e5e9f2; }
.bg-blue { background: #409EFF; }
.bg-blue-light { background: #79bbff; }
.bg-green { background: #67C23A; }
.bg-green-light { background: #95d475; }
.bg-gold { background: #e6a23c; height: 60px; }
</style>